<!-- 会费相关-按钮 -->
<template>
  <TButtonGroup :styles="{display: 'block'}">
    <template
    v-if="
      info.state === PaymentStatusEnum.ALREADYPAYCOST &&
      info.auditStatus !== PayAuditStatusEnum.AUDITED
    "
    >
      <TButton
        v-if="info.auditStatus === PayAuditStatusEnum.REFUSAL"
        text="返回缴费"
        type="primary"
        :custom-style="{marginBottom: '20rpx'}"
        @click="emit('goPayMode')"
      />
      <TButton
        v-if="info.auditStatus === PayAuditStatusEnum.UNDERAUDIT"
        text="刷新状态"
        type="primary"
        :custom-style="{marginBottom: '20rpx'}"
        @click="emit('refresh')"
      />
      <view class="linh-30 fontTC color1 fz-14" @click="emit('contact')">联系审核人员</view>
    </template>
    <template v-if="info.state === PaymentStatusEnum.NOTPAYCOST">
      <TButton
        v-if="payWay.weChatPayEnabled"
        :text="info.payMoney === 0 ? '立即支付' : '线上支付'"
        type="primary"
        :custom-style="{marginBottom: '20rpx'}"
        @click="emit('createOrder')"
      />
      <TButton
        v-if="(info.payMoney && payWay.qrCodeCollectionEnabled) || (info.payMoney && payWay.bankAccountCollectionEnabled)"
        text="转账"
        :custom-style="{
          marginBottom: '20rpx',
          backgroundColor: '#FFF'
        }"
        @click="goPay"
      />
    </template>
  </TButtonGroup>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import { getPayConfig } from '@/api/membership';
  import { type PayWayData } from '@/api/membership/types';
  import { navigateTo } from '@/router';
  import { PaymentStatusEnum, PayAuditStatusEnum } from '@/enums/membershipEnum';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const props = defineProps({
    info: propTypes.object.def({}),
  });

  const payWay = ref({} as PayWayData);
  const getPayData = function () {
    getPayConfig().then((res: PayWayData) => {
      payWay.value = res;
    });
  };
  getPayData();

  const emit = defineEmits(['goPayMode', 'refresh', 'contact', 'createOrder']);
  const goPay = function () {
    navigateTo({ name: 'playMode', options: { id: props.info.id } });
  }
</script>
<style lang="scss" scoped>
  $color-primary: #2878ff;

  .color1 {
    color: $color-primary;
  }
</style>
